<template>
  <div>
    <!-- 表格整体 -->
    <common-table
      :table-attrs="tableAttrs"
      @multiple="selectHandler"
      @controller="controllerHandler"
    >
      <template #default>
        <!-- 表格内搜索表单 -->
        <common-form
          :form-infos="searchForm"
          :form-attrs="{
            'label-width': 'auto',
            'label-position': 'left',
            size: 'medium ',
            inline: true,
          }"
          @submit="onSearchSubmit"
        />
        <el-button size="small" @click="isShowDialog = !isShowDialog"
          >添加数据</el-button
        >
      </template>
      <!-- 表格展开信息 -->
      <!-- <template #expand="props"> -->
      <template #expand="">
        +暂无门店
        <!-- {{ props.props.row }} -->
      </template>
    </common-table>
    <!-- 弹出框编辑表单 -->
    <el-dialog title="编辑名称" v-model="isShowDialog">
      <common-form
        :form-infos="editForm"
          :rules='rules'
        :form-attrs="{
          'label-width': 'auto',
          'label-position': 'left',
          size: 'small',
        }"
        @submit="onEditSubmit"
      />
    </el-dialog>
  </div>
  <el-dialog title="店铺信息" v-model="dialog.dialogTableVisible">
    <Settleddialong :list="shopMessage.shopInfo"></Settleddialong>
  </el-dialog>
</template>

<script>
import {
  defineComponent,
  shallowReactive,
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
} from "vue";
import Settleddialong from "@/components/cbl/Settleddialong.vue";
import api from "@/api";
import { ElMessageBox, ElMessage } from "element-plus";

export default defineComponent({
  components: {
    Settleddialong,
  },
  setup() {
    const tableAttrs = ref({
      // Table Attributes
      name: "店铺列表",
      infos: [
        "当前页面对店铺的信息进行管理，可以添加店铺，查看店铺账户信息，认证信息等。",
      ],
      attrs: {
        data: [
          //表格需要的数据
        ],
        ref: "multipleTable",
        style: "100%",
      },
      // Table-column Attributes
      column: [
        {
          type: "expand", //下拉详情
        },
        // {
        //   type: "selection", //多选框Attribute
        // },
        {
          prop: "shop_name",
          label: "店铺名称",
        },
        {
          prop: "shop_status",
          label: "店铺状态",
        },
        {
          prop: "status",
          label: "店铺认证",
        },

        {
          prop: "create_time",
          label: "入住时间",
          sortable: true,
        },
      ],
      // 操作按钮
      controller: ["认证信息", "同意申请", "拒绝申请"],
    });

    const list = onMounted(async () => {
      let shopinfrom = await proxy.$api.reshopInfrom();
      const mapData = shopinfrom.data.data.map((item) => {
        item.status =
          item.status == 0 ? "待审核" : item.status == 1 ? "已审核" : "已拒绝";
        item.shop_status = item.shop_status == 0 ? "关闭" : "正常";
        return item;
      });
      tableAttrs.value.attrs.data = mapData;
    });
   
    //搜索表单配置
    const searchForm = shallowReactive([
      {
        id: 1,
        name: "CommonInput", //组件名
        prop: "s1", //搜索字段名
        value: "", //可以为 字符串、数组、数值根据组件绑定的类型来配置
        formItemAttrs: {
          //el-form-item 需要传入的 Form-Item Attributes
          label: "店铺名称",
        },
        inputAttrs: {
          //表单组件需要传入的对应的 Attributes
          type: "text",
          placeholder: "请输入店铺名称",
          "input-style": { width: "221px" },
        },
      },
      {
        id: 5,
        name: "CommonSelect",
        prop: "s5",
        value: "",
        options: {
          "1": "全部",
          "2": "正常",
          "3": "已关闭",
        },
        formItemAttrs: {
          label: "店铺状态",
        },
        inputAttrs: {
          placeholder: "全部",
        },
      },
      {
        id: 6,
        name: "CommonSelect",
        prop: "s6",
        value: "",
        options: {
          "1": "全部",
          "2": "是",
          "3": "否",
        },
        formItemAttrs: {
          label: "是否认证",
        },
        inputAttrs: {
          placeholder: "全部",
        },
      },
    ]);
  // 表单验证
    const rules = reactive({
      shop_name:[
        {required: true, message: '请输入活动名称', trigger: 'blur'}
      ]
    })
    //编辑表单配置
    const editForm = shallowReactive([
      {
        id: 1,
        name: "CommonInput",
        prop: "shop_name",
        value: "",
        formItemAttrs: {
          label: "店铺名称",
        },
        inputAttrs: {
          type: "text",
        },
      },
      {
        id: 2,
        name: "CommonInput",
        prop: "name",
        value: "",
        formItemAttrs: {
          label: "联系人姓名",
        },
        inputAttrs: {
          type: "text",
        },
      },
      {
        id: 3,
        name: "CommonInput",
        prop: "telephone",
        value: "",
        formItemAttrs: {
          label: "联系人电话",
        },
        inputAttrs: {
          type: "text",
        },
      },
      {
        id: 4,
        name: "CommonInput",
        prop: "auth_card_no",
        value: "",
        formItemAttrs: {
          label: "实名身份证号码",
        },
        inputAttrs: {
          type: "text",
        },
      },
      {
        id: 5,
        name: "CommonUpload",
        prop: "auth_card_hand",
        value: "",
        formItemAttrs: {
          label: "	申请人手持身份证电子版",
        },
      },
      {
        id: 6,
        name: "CommonUpload",
        prop: "auth_card_front",
        value: "",
        formItemAttrs: {
          label: "	申请人身份证正面",
        },
      },
      {
        id: 7,
        name: "CommonUpload",
        prop: "auth_card_back",
        value: "",
        formItemAttrs: {
          label: "申请人身份证反面",
        },
      },
      {
        id: 8,
        name: "CommonInput",
        prop: "username",
        value: "",
        formItemAttrs: {
          label: "用户名",
        },
        inputAttrs: {
          type: "text",
        },
      },
      {
        id: 9,
        name: "CommonInput",
        prop: "password",
        value: "",
        formItemAttrs: {
          label: "用户密码",
        },
        inputAttrs: {
          type: "text",
        },
      },
    ]);
    const dialog = reactive({
      dialogTableVisible: false,
    });

    //弹出框绑定
    let isShowDialog = ref(false);

    //表格多选框触发
    const selectHandler = (val) => {
      console.log(val);
    };
    const shopMessage = reactive({
      shopInfo: {},
    });

    const shopInfo = async (site_id) => {
      const data = await proxy.$api.rememberAuthlist({ siteId: site_id });
      if (data.data.data[0]) {
        shopMessage.shopInfo = await data.data.data[0];
      }
    };
    //表格操作按钮触发
    const controllerHandler = (type, row) => {
      // console.log(type, row);
      if (type == "认证信息") {
        dialog.dialogTableVisible = true;
        shopInfo(row.site_id);
      } else if (type == "同意申请") {
        ElMessageBox.confirm("是否通过该店铺的审核?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            await proxy.$api.repassAudit({ site_id: row.site_id, status: 1 });
            ElMessage({
              type: "success",
              message: "审核通过!",
            });
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        ElMessageBox.prompt("请输入拒绝理由", "提示", {
          inputType: "textarea",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(async () => {
            await proxy.$api.repassAudit({ site_id: row.site_id, status: -1 });
            ElMessage({
              type: "success",
              message: "已成功拒绝!",
            });
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "已取消",
            });
          });
      }
    };

    //搜索表单提交
    const onSearchSubmit = (data) => {
      console.log("search", data);
    };

    //编辑表单提交
    const { proxy } = getCurrentInstance();
    const onEditSubmit = async (data) => {
      // console.log("edit", data);
      const res = await proxy.$api.reqaddShop(data);
      isShowDialog.value = false;
    };

    return {
      tableAttrs,
      searchForm,
      editForm,
      isShowDialog,
      selectHandler,
      controllerHandler,
      onSearchSubmit,
      onEditSubmit,
      dialog,
      shopMessage,
      open,
      rules,
      list,
    };
  },
});
</script>
